<template>
	<div class="container">
		<img ref='img' :src="props.src" alt="" style="height: 972rpx;width: 686rpx;display: flex;" />
		<view class="footer">
			<b-button style="width: 310rpx; height: 88rpx; border-radius: 60rpx" @tap="cancelBtn">取消</b-button>
			<b-button type="primary" style="width: 310rpx; height: 88rpx; border-radius: 60rpx">长按图片保存</b-button>
		</view>
	</div>
</template>

<script setup>
	const props = defineProps({
		src: String
	})
	const emit = defineEmits(['cancel'])
	const cancelBtn = function() {
		emit('cancel')
	}
</script>

<style lang="scss" scoped>
	img {
		/* 禁用移动端的长按弹出菜单 */
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		/* 可以添加一些视觉反馈，比如透明度降低，以示区别 */
		opacity: 0.7;
	}

	img:active {
		opacity: 1;
	}

	.container {
		width: 100%;
		height: 100%;
		background: rgba(53, 53, 53, 0.6);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>